<template>
  <div class="fault-box">
    <el-select v-model="functionalModule" placeholder="请选择" style="width:260px;margin-right: 15px;color: #959595">
      <el-option v-for="item in functionalModules" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
    <el-select v-model="analysisArea" multiple collapse-tags collapse-tags-tooltip style="width:260px;">
      <el-option v-for="item in analysisAreas" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
    <el-button text class="general-btn-action" @click="submitElm">提交</el-button>
    <el-button text class="general-btn-action" @click="reselectElm">重置</el-button>
  </div>
  <div class="bottom-box">
    <div class="box-item right-box">
      <el-table :data="tableData"
        style="height:100%; width: 100%;--el-table-border-color: none;overflow-y: auto;background-color: #192E37;"
        :row-class-name="getClassName" :header-cell-style="customHeaderCell" :cell-style="customCell">
        <el-table-column prop="st" label="场站" />
        <el-table-column prop="elm" label="元件" />
      </el-table>
    </div>
    <div :style="{ width: $computeVw(20) }"></div>
    <div class="box-item right-box">
      <el-table :data="tableData2"
        style="height:100%; width: 100%;--el-table-border-color: none;overflow-y: auto;background-color: #192E37;"
        :row-class-name="getClassName" :header-cell-style="customHeaderCell" :cell-style="customCell">
        <el-table-column prop="act" label="开关动作" width="180" />
        <el-table-column prop="target_source" label="供电路径" width="180" />
        <el-table-column prop="t" label="决策时间" width="180" />
        <el-table-column prop="recover" label="恢复功率" width="180" />
        <el-table-column prop="loading_percent" label="转供后负载率" />
      </el-table>
    </div>

  </div>
</template>

<script lang="ts" setup>
import { computed, defineComponent, ref, watch, onMounted } from "vue";
import axios from "axios";
import { BASE_URL } from '@/utils/common.js'
import elTableMixin from '@/utils/elTableMixin.js'
const { customHeaderCell, customCell, getClassName } = elTableMixin();


const functionalModule = ref("");
const analysisArea = ref([]);

const functionalModules = ref([
  { value: "", label: "请选择" },
  // ... 其他功能模块
]);

const analysisAreas = ref([

])

const reselectElm = () => {
  tableData.value = []
  analysisAreas.value = []
  analysisArea.value = []
  functionalModule.value = ''
}

const tableData2 = ref([])
const submitElm = async () => {
  const response = await axios.post(BASE_URL + '/submitElmIdx',
    tableData.value, {
    headers: {
      'Content-Type': 'application/json', // 明确指定请求头为JSON  
    },
  })
  tableData2.value = response.data
  console.log(response.data)
}

const getElmBySt = async (st) => {
  const response = await axios.get(BASE_URL + '/getElmBySt?st=' + st);

  for (let i = 0; i < response.data.length; i++) {
    let item = {
      label: response.data[i].elm, value: response.data[i].elm,
      type: response.data[i].type, idx: response.data[i].idx
    }
    analysisAreas.value.push(item)
  }
}

watch(functionalModule, (newVal, oldVal) => {
  console.log("param1是::" + newVal);
  analysisAreas.value = []
  getElmBySt(newVal)
})

watch(analysisArea, (newVal, oldVal) => {
  // 添加新选中的值（去除已经存在的）  
  const newItems = newVal.filter(val => !oldVal.includes(val));
  console.log(newItems[0]);
  console.log(analysisAreas);
  const foundItem = analysisAreas.value.find(item => item.value === newItems[0])
  console.log(foundItem);
  if (foundItem) {
    let tableItem = { idx: foundItem.idx, elm: foundItem.value, st: functionalModule.value, type: foundItem.type }
    tableData.value.push(tableItem)
  }
})

const tableData = ref([])

onMounted(async () => {
  try {
    // 发送 GET 请求到后台接口  
    const response = await axios.get(BASE_URL + '/getStList');
    for (let i = 0; i < response.data.length; i++) {
      console.log(response.data[i])
      let item = { label: response.data[i], value: response.data[i] }
      functionalModules.value.push(item)
    }

  } catch (err) {
    console.error('Error fetching data:', err);

  }
})

</script>

<style scoped lang="scss">
.fault-box {
  height: computeVh(80);
  display: flex;
  align-items: center;
}

.bottom-box {
  flex-shrink: 0;
  flex: 1;
  display: flex;
  justify-content: space-between;

  .box-item {
    flex: 1;
    // height: 55vh;
    background-color: #192E37;
    // border: 1px solid #3F8893;
  }

}

::v-deep .el-table__empty-block {
  width: 100% !important;
  height: computeVh(600) !important;
  font-size: computeVw(14);
  color: #FFFFFF !important;
}
</style>